<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM之获取元素方法</title>
</head>
<body>
    <div id="time">2020-02-16</div>

    <ul>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
    </ul>
    <ul id='nav'>
        <li>库里</li>
        <li>库里</li>
        <li>库里</li>
        <li>库里</li>
        <li>库里</li>
    </ul>

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="navs">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 注意：因为文档页面从上往下加载，所以先得有标签，所以script标签写在div标签下面！
        // 方法1：根据ID获取元素
        var timer = document.getElementById('time');  // 接收的是一个字符串
        console.log(timer);
        console.log(typeof timer);  // 返回的是一个元素对象
        console.dir(timer); // 打印返回的元素对象，更好的查看里面的属性和方法


        // 方法2：根据标签名获取
        var lis = document.getElementsByTagName('li');  // 接收的是一个字符串
        console.log(lis);  // 返回的是元素对象的集合，以伪数组的形式存储的
        console.log(lis[0]);
        // 依次打印里面的元素对象，使用遍历的方法
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // element.getElementsByTagName()：可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav');  // 获取id='nav'的ul标签
        var res = nav.getElementsByTagName('li');
        console.log(res);
        

        // 方法3：根据H5新增的方法获取元素：getElementByClassName('类名')
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 根据H5新增的方法获取元素：querySelector('选择器')：返回指定选择器的第一个元素对象，切记! 里面的选择器需要加符号，例如.box #navs等
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var navs = document.querySelector('#navs');
        console.log(navs);
        var li = document.querySelector('li');
        console.log(li);
        // 根据H5新增的方法获取元素：querySelectorAll('选择器')：返回指定选择器的所有元素对象
        var box = document.querySelectorAll('.box');
        console.log(box);
        var lis = document.querySelectorAll('li');
        console.log(lis);
        

        // 方法4：根据特殊元素获取元素
        // 获取body元素
        var body = document.body;
        console.log(body);
        console.dir(body);
        // 获取html元素
        var html = document.documentElement;
        console.log(html);
        console.dir(html);
    </script>
</body>
</html>